<template>
	<el-main>
		<el-tabs type="border-card">
			<el-tab-pane label="Simple Icon">
				<el-alert
					title="这里整合了阿里巴巴矢量图标库，本框架使用了Hippo Design官方图标库，待完善..."
					type="success"
					:closable="false">
				</el-alert>
				<el-row type="flex" justify="space-around" style="margin-top: 24px;">
					<el-col :md="4" v-for="(item,key) in simpleIcon" :key="key">
						<el-tooltip class="item" effect="dark" :content='item.text' placement="bottom">
							<span class="copyIcon" 
								:data-clipboard-text="item.text"
								@click="copyIcon">
								<i class="iconfont" v-html="item.label"></i>
								<div>{{item.label}}</div>
							</span>
						</el-tooltip>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="ElementUI Icon">
				<el-alert
					title="由于本人太懒，所以这里就直接放官方链接了"
					type="info"
					:closable="false"
					style="margin-bottom: 24px;">
				</el-alert>
				ElementUI：
				<el-link href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">
					请前往官方网站查看
				</el-link>
			</el-tab-pane>
		</el-tabs>
	</el-main>
</template>

<script>
	import Clipboard from 'clipboard'
	export default {
		name: 'Icon',
		data() {
			return {
				clipboard: null,
				simpleIcon: [
					{
						text: '<i class="iconfont">&#xe70b;</i>',
						label: '&#xe70b;'
					},
					{
						text: '<i class="iconfont">&#xe70c;</i>',
						label: '&#xe70c;'
					},
					{
						text: '<i class="iconfont">&#xe70d;</i>',
						label: '&#xe70d;'
					},
				]
			}
		},
		mounted() {
			this.clipboard = new Clipboard(".copyIcon");
		},
		destroyed() {
			this.clipboard.destroy();
		},
		methods: {
			// 复制图标
			copyIcon() {
				let _this = this;
				_this.clipboard.on('success', function () {
					_this.$message({
						message: '复制成功',
						type: 'success'
					});
					_this.clipboard.destroy();
					_this.clipboard = new Clipboard('.copyIcon');
				});
			}
		}
	}
</script>

<style scoped>
	.el-row {
		text-align: center;
	}
	.copyIcon {
		cursor: pointer;
	}
</style>
<!-- 阿里巴巴矢量图标库 -->
<style>
	@font-face {
		font-family: 'iconfont';  /* Project id 3116470 */
		src: url('//at.alicdn.com/t/font_3116470_b34yo5i3034.woff2?t=1641276285400') format('woff2'),
			 url('//at.alicdn.com/t/font_3116470_b34yo5i3034.woff?t=1641276285400') format('woff'),
			 url('//at.alicdn.com/t/font_3116470_b34yo5i3034.ttf?t=1641276285400') format('truetype');
	}
	.iconfont{
		font-family: "iconfont" !important;
		font-size: 32px;font-style:normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}
</style>
